<template>
	<view class="rate-comparison-card">
		<view class="card-header">
			<text class="card-title">四率对比</text>
			<view class="header-right">
				<text class="view-list-btn" v-if="showViewButton" @click="handleViewList">查看名单 ></text>
				<view class="info-icon">ⓘ</view>
			</view>
		</view>
		
		<!-- 圆环图 -->
		<view class="chart-container">
			<view class="donut-chart">
				<view class="chart-center">
					<text class="chart-percentage">{{ chartData.percentage }}</text>
					<text class="chart-label">{{ chartData.label }}</text>
				</view>
			</view>
		</view>
		
		<!-- 四率统计 -->
		<view class="rate-stats">
			<view class="rate-item" v-for="rate in rateData" :key="rate.type">
				<view class="rate-color" :class="rate.color"></view>
				<text class="rate-text">{{ rate.text }}</text>
				<text class="rate-percentage">{{ rate.percentage }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'RateComparison',
	props: {
		chartData: {
			type: Object,
			default: () => ({
				percentage: '33.14%',
				label: '优秀'
			})
		},
		rateData: {
			type: Array,
			default: () => [
				{ type: 'excellent', text: '优秀 [500-400] 人数 138', percentage: '占比 33.12%', color: 'blue' },
				{ type: 'good', text: '良好 [300-400] 人数 158', percentage: '占比 33.12%', color: 'teal' },
				{ type: 'pass', text: '及格 [200-300] 人数 618', percentage: '占比 33.12%', color: 'orange' },
				{ type: 'low', text: '低分 [0-200] 人数 2', percentage: '占比 33.12%', color: 'gray' }
			]
		},
		// 是否显示查看名单按钮
		showViewButton: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleViewList() {
			this.$emit('view-list');
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@white: #fff;

.rate-comparison-card {
	background: @white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.card-title {
			font-size: 28rpx;
			font-weight: bold;
			color: @text-color;
		}

		.header-right {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.view-list-btn {
				font-size: 24rpx;
				color: @primary-color;
				cursor: pointer;
				transition: all 0.2s;

				&:active {
					opacity: 0.7;
				}
			}

			.info-icon {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background: #e0e0e0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18rpx;
				color: @text-light;
			}
		}
	}

	.chart-container {
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;

		.donut-chart {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			background: conic-gradient(
				#2196F3 0deg 119deg,
				@primary-color 119deg 238deg,
				#FF9800 238deg 357deg,
				#E0E0E0 357deg 360deg
			);
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			&::before {
				content: '';
				width: 120rpx;
				height: 120rpx;
				background: @white;
				border-radius: 50%;
				position: absolute;
			}

			.chart-center {
				display: flex;
				flex-direction: column;
				align-items: center;
				z-index: 1;

				.chart-percentage {
					font-size: 32rpx;
					font-weight: bold;
					color: @text-color;
				}

				.chart-label {
					font-size: 22rpx;
					color: @text-light;
				}
			}
		}
	}

	.rate-stats {
		width: 100%;

		.rate-item {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			gap: 12rpx;

			.rate-color {
				width: 16rpx;
				height: 16rpx;
				border-radius: 2rpx;

				&.blue { background: #2196F3; }
				&.teal { background: @primary-color; }
				&.orange { background: #FF9800; }
				&.gray { background: #E0E0E0; }
			}

			.rate-text {
				flex: 1;
				font-size: 24rpx;
				color: @text-color;
			}

			.rate-percentage {
				font-size: 24rpx;
				color: @text-light;
			}
		}
	}
}
</style>
